<template>
    <div class="shopcar-container">
        <div class="goods-list">
            <!-- 列表项 -->
            <div class="mui-card">
            <!-- <div class="mui-card" v-for="(item,i) in goodslist" :key="item.id"> -->
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch></mt-switch>
						<!-- <mt-switch v-model="$store.getters.getGoodsSelected[item.id]" @change="SelectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch> -->
						<!-- <img src="item.thumb_path"> -->
						<img src="../../images/detail.jpg">
						<div class="info">
							<h1>耐克欣赏都鞋耐克欣赏都鞋</h1>
							<!-- <h1>{{item.title}}</h1> -->
							<p>
								<span class="price">￥2199</span>
								<!-- <span class="price">{{item.sell_price}}</span> -->
								<numbox></numbox>
								<!-- <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox> -->
								<!-- 如何从购物车获取商品的数量？ -->
								<!-- 1，我们可以先创建一个空对象，然后循环购物车所有的商品的数据，把当前循环的商品id 
								作为对象的属性名，count值作为对象的属性值，这样当所有的商品循环一遍 就会得到一个对象：{88:2,89:2,90:3} -->
								<a href="#">删除</a>
								<!-- <a href="#" @click.prevent="remove(item.id)">删除</a> -->
							</p>
						</div>
					</div>
				</div> 
			</div>
        </div>
        <!-- 结算区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan" >
						<div class="left">
							<p>总计(不含运费)</p>
							<!-- <p>已勾选商品 <span class="red">{{$store.getters.getGoodsCountAndAmount.amount}}</span> 件，总价￥<span class="red">{{$store.getters.getGoodsCountAndAmount.}}</span> </p> -->
							<p>已勾选商品 <span class="red">2</span> 件，总价￥<span class="red">1200</span> </p>
						</div>
						<mt-button type="danger">去结算</mt-button>
				    </div>
					
			    </div>
	    </div>
		<p></p>
		<!-- <p>{{$store}}</p> -->
    </div>
</template>
<script>
	import numbox from '../subcomponents/shopcar_numbox.vue'
	export default{
		data(){
			return {
				goodslist:[]//购物车中所有商品数据
			}
		},
		created(){
			this.getGoodsList()
		},
		methods:{
            getGoodsList(){
				// 1.获取到 store 所有的商品的id 然后拼接用逗号分隔的字符串
				var idArr=[];
				this.$store.state.car.forEach(item=>idArr.push(item.id))
				// 如果 购物车中没有商品 则直接返回 不需要请求数据接口 否则会报错
				if(idArr.length<=0){
					return;
				}
				//获取购物车商品列表
				this.$http.get('api/goods/getshopcarlist'+idArr.join(".")).then(result=>{
					if(result.body.status===0){
						this.goodslist=result.body.message
					}
				})
			},
			remove(id,index){
				// 点击删除 把商品从store 中根据传递的id删除 同时 把当前组件的goodslist中

				// 对应要删除的那个商品，使用index来删除
				this.goodslist.splice(index,1);
				this.store.commit('removeFormCar',id)
			},
			selectedChanged(id,val){
				//每当带点击开关 把最新的开关状态 同步到 store中
				// console.log(id+" --- " + val);
				this.$store.commit("upadateGoodsSelected",{id,selected:val});
			}
		},
		components:{
			numbox
		}
	}
</script>
<style lang="scss" scoped>
.shopcar-container{
	background-color: #eee;
	overflow: hidden;
	.goods-list{
		.mui-card-content-inner{
			display: flex;
			align-items: center;
		}
		img{
			width: 60px;
			height: 60px;
		}
		h1{
			font-size: 12px;
		}
		.info{
			.price{
				color:red; 
				font-weight: bold;
			}
		}
	}
	.jiesuan{
		display: flex;
		justify-content:space-between;
		align-items: center;//图片居中
		.red{
			font-size: 16px;
			font-weight: bold;
		}
	}
}
</style>

